<template>
  <div class="blockTrading">
      <CustomNavBar :title="t('OTC Trading')">
          <span class="title" @click="goRecord">{{t('Record')}}</span>
      </CustomNavBar>
      <div  class="container">
        <div  class="cell">

          <van-list 
            v-model:loading="loading"
            :finished="finished"
            :finishedText="t('No more data')"
            class="cell-item_list" v-if="otcList.length"
            :loading-text="t('loading......')"
          >
            <div class="cell-item label">
              <div class="cell-item-name">{{t('Name')}}</div>
              <div class="cell-item-price">{{t('Price')}}</div>
              <div class="cell-item-btn">
                <div class="btn" style="opacity: 0">{{t('Subscription')}}</div>
              </div>
            </div>
            <van-cell v-for="e in otcList" :key="e.id">
              <div class="cell-item" >
                <div class="cell-item-name">
                  <div class="code"><strong>{{e.exchange}}</strong></div>
                  <div class="name">{{e.org_code}}</div>
                  <div class="tag">{{e.ticker}}</div>
                </div>
                <div class="cell-item-price"><span>₹{{e.price}}</span></div>
                <div class="cell-item-btn" @click="openPopup(e)">
                  <div class="btn" >Subscription</div>
                </div>
              </div>
            </van-cell>

          </van-list>
          <NoRecord v-else></NoRecord>
        </div>
      </div>
    </div>
    <van-popup
      v-model:show="showPopup"
      position="bottom"
      closeable
      @close="close"
    >
        <h5 class="stock_name">{{curTrade.ticker}}</h5>
        <div class="info-list">
          <div class="info-item">
            <span>{{t('Buying Price')}}</span>
            <span>₹{{decimalpre(curTrade.price)}}</span>
          </div>
          <!--
          <div class="info-item">
            <span>Purchase<br>Amount</span>
            <span>₹{{decimalpre(purchase_amount)}}</span>
          </div> -->
          <div class="info-item">
            <span>{{t('Trading Balance')}}</span>
            <span>₹{{decimalpre(trade_balance)}}</span>
          </div>
          <div class="info-item">
            <span>{{t('Trade Password')}}</span>
            <van-field placeholder="Please Enter T-password" v-model="t_password" maxlength='20' type="password" clearable></van-field>
            <!-- <van-number-keyboard
              v-model="t_password"
              placeholder="Please Enter T-password"
              :show="show"
              :maxlength="10"
              @blur="show = false"
            /> -->
          </div>
        </div>
        
        <div class="btn_box">
          <van-button :loading="submitLoading" @click="tradeHandler">{{t('Buy')}}</van-button>
        </div>
      </van-popup>
</template>
<script setup>
import { onMounted, ref, nextTick } from 'vue'
import {useRouter} from "vue-router"
import { get, post } from '@/utils/request'
import { decimalpre } from '@/utils/util'
import NoRecord from '@/components/NoRecord.vue'
import { showLoadingToast, closeToast, showToast, showSuccessToast } from 'vant'
import { t } from '@/languages'
const router = useRouter()
const show = ref(false)
const showPopup = ref(false)
const t_password = ref('')
const VerificationCode = ref('')
const curTrade = ref({})
const otcList = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(0)
const userDetail = ref({})
const submitLoading = ref(false)
const quantity = ref(0)

const purchase_amount = computed(() => {
  return curTrade.value.price * quantity.value
})
const trade_balance = computed(() => {
  return userDetail.value.balance - purchase_amount.value
})
async function getBlockTradeList() {
  try {
    const res = await get('/api/app/otc/list/', {
      page: page.value + 1,
      limit: 100
    })
    otcList.value = otcList.value.concat(res.data || [])
    if(otcList.value.length === res.count) {
      finished.value = true
    } else {
      page.value += 1
    }
  } catch (error) {
    finished.value = true
  } finally {
    loading.value = false
  }
}

async function getUserInfo() {
  const res= await get(`/api/app/getmyinfo/`, {})
  userDetail.value = res
}


async function tradeHandler() {
  // if(quantity.value < curTrade.value.min_quantity) {
  //   showToast(`The minimum quantity is ${curTrade.value.min_quantity}`)
  //   return
  // }
  if(!t_password.value) {
    showToast(t(`Please enter trade password`))
    return
  }
  if (trade_balance.value < 0) {
    showToast(t(`Sory, your balance is running low`))
    return
  }

  try {
    submitLoading.value = true
    await post('/api/app/otc/sub/', {
      otc_id: curTrade.value.id,
      // quantity: +quantity.value
    })
    showPopup.value = false
    nextTick(() => {
      showSuccessToast(t('Successfull'))
    })
    close()
  } catch (error) {

  } finally {
    submitLoading.value = false
  }
}

function close() {
  curTrade.value = {}
  t_password.value = ''
}


function openPopup(e) {
  curTrade.value = e
  showPopup.value = true
}

function goRecord(){
  router.push("/blockTradingRecordList")
}

onMounted(() => {
  getBlockTradeList()
  getUserInfo()
})
</script>
<style lang="scss">
.van-cell {
  padding: 0;
}
.blockTrading .container {
  padding: 0.53333rem 0.4rem;
}
.cell-item.label {
  border: none;
}
.blockTrading .container .cell .label {
  background: #0f3a40;
}

.blockTrading .container .cell .cell-item {
  // box-shadow: 0 0.10667rem 0.37333rem 0 rgba(0, 0, 0, 0.15);
  // display: flex;
  // padding: 0.26667rem;
  // align-items: center;
  // border-radius: 0.16rem;
  // margin-bottom: 0.26667rem;
    display: flex;
    padding: .26667rem;
    align-items: center;
    border-radius: .16rem;
    margin-bottom: .26667rem;
    &.label {
      background-color: #0f3a40;
    }
}

.blockTrading .container .cell .cell-item .cell-item-name {
  flex: 1 + 2px;
  text-align: left;
}

// .blockTrading .container .cell .cell-item .cell-item-name .code {
//   width: 0.66667rem;
//   height: 0.66667rem;
// }

.blockTrading .container .cell .cell-item .cell-item-name .cell-item-name-top {
  font-size: 0.37333rem;
}

.blockTrading
  .container
  .cell
  .cell-item
  .cell-item-name
  .cell-item-name-bottom {
  display: inline-block;
  font-size: 0.32rem;
  color: #fff;
  background: #325d79;
  padding: 0.13333rem;
  margin-top: 0.13333rem;
  border-radius: 0.13333rem;
}

// .blockTrading .container .cell .cell-item .name {
//   color: #62f792;
//   font-weight: 600;
//   font-size: 0.42667rem;
// }
.cell-item  {
  border: 1px solid #507b97;
}
.blockTrading .container .cell .cell-item .cell-item-price {
  width: 2rem;
  text-align: left;
}

.blockTrading .container .cell .cell-item .price {
  color: #d73d3d;
  font-size: 0.37333rem;
  padding: 0.1rem;
}

.blockTrading .container .cell .cell-item .cell-item-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blockTrading .container .cell .cell-item .cell-item-btn .btn {
  font-size: 0.363rem;
  padding: 0.08rem 0.20rem;
  background-color: #62f792;
  border-radius: 0.21333rem;
  color: #0d111a;
  font-weight: 600;
}

.blockTrading .container .cell .cell-item-list {
  border: 0.02667rem solid #2b4e5a;
  background: #0e1822;
}

.blockTrading .container .cell .empty {
  margin-top: 1.86667rem;
  display: flex;
  justify-content: center;
}

.blockTrading .container .cell .empty img {
  width: 75vw;
  height: 25vh;
}

.blockTrading .title {
  color: #62d8bf;
}

.blockTrading .van-popup {
  background-color: #fff;
}

.blockTrading .van-action-sheet {
  color: #000;
}

.blockTrading .sheet-content {
  padding: 0.26667rem 0.4rem;
  padding-bottom: 1.33333rem;
}

.blockTrading .sheet-content .sheet-content-title {
  display: flex;
  justify-content: space-between;
  font-size: 0.53333rem;
  font-style: normal;
  font-weight: 700;
  margin: 0.53333rem 0;
}

.blockTrading .sheet-content .sheet-content-cell-item {
  width: 100%;
  border-radius: 0.13333rem;
  border: 0.02667rem solid #507b97;
  background: #c6e9ff;
  display: flex;
  padding: 0.26667rem 0.26667rem;
  align-items: center;
  font-size: 0.37333rem;
  margin-bottom: 0.13333rem;
}

.blockTrading
  .sheet-content
  .sheet-content-cell-item
  .sheet-content-cell-item-name {
  flex: 1;
}

.blockTrading
  .sheet-content
  .sheet-content-cell-item
  .sheet-content-cell-item-value {
  flex: 1;
  text-align: right;
}

.blockTrading .sheet-content .sheet-content-cell-item .van-cell {
  background-color: unset;
}

.blockTrading
  .sheet-content
  .sheet-content-cell-item
  .van-cell
  .van-field__control {
  color: #000;
  text-align: right;
}

.blockTrading .sheet-content .cell-buy-container {
  display: flex;
}

.blockTrading .sheet-content .cell-buy-container .cell-buy-balance {
  width: 100%;
  border-radius: 0.13333rem;
  border: 0.02667rem solid #507b97;
  background: #c6e9ff;
  display: flex;
  padding: 0.26667rem 0.26667rem;
}

.blockTrading .sheet-content .cell-buy-container .cell-buy-balance .van-cell {
  padding: 0;
  font-size: 0.42667rem;
  color: #6d6d6d;
  background-color: unset;
}

.blockTrading
  .sheet-content
  .cell-buy-container
  .cell-buy-balance
  .van-field__label {
  margin-right: 0;
  display: flex;
  align-items: center;
  color: #6d6d6d;
}

.blockTrading
  .sheet-content
  .cell-buy-container
  .cell-buy-balance
  .van-field__control {
  padding-left: 0.13333rem;
  border-radius: 0.21333rem;
  height: 0.8rem;
  color: #000;
  text-align: right;
}

.blockTrading .sheet-content .btns {
  margin-top: 0.26667rem;
}

.blockTrading .sheet-content .btns .btn-item {
  background: #325d79;
  padding: 0.4rem 0;
  color: #fff;
  border-radius: 0.16rem;
  text-align: center;
}

.cell-item-name {
  .code {
    color: #62d8bf;
    line-height: 0.5rem;
  }
  .name {
    font-size: 0.35rem;
    line-height: 0.5rem;
  }
  .tag {
    font-size: 0.35rem;
    line-height: 0.5rem;
    padding: 0rem 0.1rem;
    display: inline-block;
    background-color: #507b97;
    border-radius: 0.1rem;
  }
}
.btn_box {
  padding: 0.5rem;
  .van-button {
    width: 100%;
    background-color: #507b97;
    color: #fff;
  }
}
.stock_name {
  padding: 0.5rem 0;
  font-size: 0.5rem;
  color: #000;
  padding-left: 0.2rem;
}
.info-list {
  // padding-top: 1rem;
  padding: 0 0.2rem;
  .info-item {
    min-height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    background-color: #c6e9ff;
    border: 1px solid #507b97;
    padding: 0 0.2rem;
    border-radius: 0.1rem;
    margin-bottom: 0.1rem;
    span {
      white-space: nowrap;
      flex-shrink: 0;
      font-size: 0.3rem;
      line-height: 0.5rem;
    }
    .van-field {
      background-color: transparent;
      padding: 0.2rem;
      input {
        text-align: right;
        font-size: 0.3rem;
      }
    }
  }
}
.blockTrading .cell .cell-item .cell-item-name.label {
    min-height: 0.8rem;
    line-height: 0.8rem;
    flex: 1;
}
.cell-item-btn {
  .btn {
    font-size: .37333rem;
    padding: .08rem .21333rem;
    background-color: #62f792;
    border-radius: .21333rem;
    color: #0d111a;
    font-weight: 600;
  }
}
.blockTrading .cell .cell-item .cell-item-price {
    height: 0.8rem;
    line-height: 0.8rem;
    span {
      color: #f20c0c;
      font-size: 0.35rem;
      padding: 0.1rem;
    }

}
</style>
